<template>
	<div class="contain ignore-carbon-top">
		<div class="cTitle">
			<div class="title">发电统计</div>
			<div class="edhengxian"></div>
		</div>
		<div class="top-img">
			<div class="topImg" v-for="item in content" :key="item.id">
				<div class="num">{{ item.num || 0 }}</div>
				<div class="name">{{ item.name }}</div>
				<div class="unit" :style="{background:'url('+item.src+') no-repeat',backgroundSize:'100% 100%'}">
					<div>{{ item.unit }}</div>
				</div>
			</div>
		</div>
		<div class="bimg"></div>
	</div>
</template>

<script>
	import request from '@/common/request.js';
	import $config from '@/common/config.js';
	export default {
		data() {
			return {
				content: [{
						id: '1',
						src: $config.comstatic + '/reddImg/power.png',
						name: '累计发电量',
						num: 3365,
						unit: '(千瓦时)',
					},
					{
						id: '2',
						src: $config.comstatic + '/reddImg/redd.png',
						name: '累计用电量',
						num: 31,
						unit: '千瓦时',
					},
					{
						id: '3',
						src: $config.comstatic + '/reddImg/pent.png',
						name: '使用率',
						num: 1455,
						unit: '(%)',
					}

				]
			}
		},
		methods: {
			getDetailData() {
				request.get('/jeecgboot/statistic/pv/data6?projectId=' + $config.pcode).then(res => {
					console.log(res, '#####res-----')
					this.content[0].num = res.result.sum_pv_all
					this.content[1].num = res.result.sum_pv_usage
					let precent = Number(res.result.sum_pv_all) / Number(res.result.sum_pv_usage) * 10000;
					this.content[2].num = Math.round(precent) / 100
				})
			}
		},
		created() {
			this.getDetailData()
		}
	}
</script>

<style lang="less" scoped>
	.contain {
		width: 100%;
		height: calc(100%);
		display: flex;
		flex-direction: column;
		justify-items: center;
		justify-content: center;
		position: relative;
		background: url('http://portal.xumengte.com/reddImg/bimg.png') no-repeat;
		background-position: 0 100%;
		background-size: 100% auto;
		box-sizing: border-box;



		.cTitle {
			display: flex;
			flex-direction: column;
			margin-bottom: 28px;

			.title {
				color: #fff;
				// font-size: 20px;
				font-size: 2vh;
				font-weight: bold;
				margin: 0 0 8px 8px;
			}
		}

		.top-img {
			width: 80%;
			margin: 0 auto;
			height: 90%;
			display: flex;
			justify-content: center;
			align-items: flex-start;

			.topImg {
				width: 40%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 0 10px;

				.img {
					display: flex;
					justify-content: center;
					width: 50px;
				}

				.name {
					color: #fff;
					display: flex;
					// font-size: 16px;
					font-size: 1vw;
					justify-content: center;
					white-space: nowrap;
				}

				.num {
					color: #93d8ff;
					display: flex;
					justify-content: center;
					width: 50%;
					// line-height: 32px;
					// font-size: 34px;
					line-height: 2.2vw;
					font-size: 2.1vw;
					font-weight: 400;
					font-family: 'pieFont';
				}

				.unit {
					// height: 80px;
					// width: 74px;
					width: 3vw;
					height: 4.4vw;

					>div {
						text-align: center;
						color: #7b8088;
						// height: 20px;
						height: 1.2vw;
						font-size: 0.9vw;
						white-space: nowrap;
					}
				}
			}
		}

		.edhengxian {
			position: relative;
			width: 96%;
			height: 1px;
			margin: 0 auto;
			background-color: rgba(255, 255, 255, 0.3);
		}

		.edhengxian::before {
			position: absolute;
			top: -2px;
			left: 0;
			background-color: #94f2ff;
			box-shadow: 0px 0px 5px 1px #e5e9e7;
			content: '';
			height: 4px;
			width: 30px;
			border-radius: 1px;
			z-index: 2;
		}

		.edhengxian::after {
			position: absolute;
			top: -1px;
			right: 0;
			background-color: #76828f;
			opacity: 1;
			content: '';
			height: 3px;
			width: 15px;
			z-index: 2;
		}
	}

	.ignore-carbon-top {
		.top-img {
			.topImg {
				min-width: 80px;

				.unit {
					min-width: 74px;

					div {
						width: 100%;
					}
				}

				.num,
				.unit,
				.name {
					// min-height: 28px;
				}
			}
		}
	}
</style>
